* {
  margin: 0;
  padding: 0;
}

.banner {
  position: relative;
  display: flex;
  height: 600px;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  background-color: #333;
  position: absolute;
  width: 600px;
  overflow: hidden;
}

.box > img {
  float: left;
  width: 600px;
  height: 400px;
  transform: translateX(0);
  transition: all 0.3s ease;
}

.dot-group {
  position: absolute;
  bottom: 5%;
  left: 40%;
  width: 200px;
  display: flex;
  justify-content: space-around;
}

.dot {
  width: 20px;
  height: 20px;
  border: 3px solid #000;
  border-radius: 50%;
}

.active-dot {
  background-color: black;
}

.pre,
.next {
  position: absolute;
  font-size: 30px;
  color: white;
}

.pre {
  top: 40%;
  left: 0;
}

.next {
  top: 40%;
  right: 0;
}

/* 作业打印格式 */
pre {
  margin-top: 300px;
}
